<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>checkbox</title>
</head>

<body>
  <div id="root">
    <div>
      是否记住账号和密码
      <!-- 如果是单个复选框，也就是选中或不选中事情，用true/false -->
      <input type="checkbox" v-model="ischecked">
    </div>
    <hr>
    <div>
      <label>全选<input type="checkbox" v-model="ischecked" @change="allfn"></label>
      <!-- 多选 多选一定要设置 value值 -->
      你最喜欢前端什么技术：<br>
      <input type="checkbox" value='html' v-model="likes">html<br>
      <input type="checkbox" value='css' v-model="likes">css<br>
      <input type="checkbox" value='div' v-model="likes">div<br>
      <input type="checkbox" value='js' v-model="likes">js<br>
      <input type="checkbox" value='vue' v-model="likes">vue<br>
    </div>

    <div>
      <template v-for="item in lists">
        <input type="checkbox" :value='item' v-model="likes" :key="item">{{ item }}<br>
      </template>
    </div>


  </div>
  <script src="./js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      // 数据源 所有的数据初始化都在这里
      data: {
        lists: ['html', 'css', 'div', 'js', 'vue'],
        // true 选中  false 不选中
        ischecked: false,
        // 多个选择，用数组
        likes: ['css']
      },
      methods: {
        allfn() {
          if (this.ischecked) {
            // 勾选
            this.likes = this.lists
          } else {
            this.likes = []
          }
        }
      },
    })
  </script>
</body>

</html>